<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('设置默认选中的菜单')}`">{{ $t('设置默认选中的菜单') }}</t>
            <li>
                通过设置<span class="d-code">default-active</span>来让组件展示默认选中；你可以结合
                <span class="d-code">computed</span>函数来动态获取当前
                <span class="d-code">route</span>对应的
                <span class="d-code">path</span>
            </li>
        </template>
        <sib-menu mode="horizontal" :default-active="defaultActiveMenu" :menus="menus"></sib-menu>
    </example>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();

        return {
            defaultActiveMenu: computed(() => route.path),
            menus: [
                {
                    name: '菜单标题',
                    icon: 'Location',
                    children: [
                        { name: '菜单1', path: '/menu66' },
                        { name: '菜单2', path: '/path1' },
                        { name: '菜单3', path: '/path2' },
                    ],
                },
                { name: 'Menu 菜单', path: '/menu', icon: 'Menu' },
                { name: '菜单5', path: '/menu2', icon: 'Document' },
                { name: '菜单6', path: '/path4', icon: 'Setting' },
            ],
            templateString: `<template>
    <div class="example-box">
        <sib-menu mode="horizontal" :default-active="defaultActiveMenu" :menus="menus"></sib-menu>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

export default {
    setup() {
        const route = useRoute();

        return {
            defaultActiveMenu: computed(() => route.path),
            menus: [
                {
                    name: '菜单标题',
                    icon: 'Location',
                    children: [
                        { name: '菜单1', path: '/menu66' },
                        { name: '菜单2', path: '/path1' },
                        { name: '菜单3', path: '/path2' },
                    ],
                },
                { name: 'Menu 菜单', path: '/menu', icon: 'Menu' },
                { name: '菜单5', path: '/menu2', icon: 'Document' },
                { name: '菜单6', path: '/path4', icon: 'Setting' },
            ],
        };
    },
};
<\/script>`,
        };
    },
};
</script>
